import React, { PureComponent } from "react";
import { Howl } from 'howler';
import anime from 'animejs';
import JSZip from 'jszip';
import { HttpClient } from '../../commoe/HttpClient';
import FileSaver from 'file-saver'
import {
  Footer,
  Header,
  Arwes,
  Image,
  Words,
  Frame,
  Content,
  Link,
  Table,
  Button,
  Row,
  Col,
  List,
} from "arwes";
import { Shading } from "three";
export default class qianying extends PureComponent {
  constructor(props) {
    super(props);
    this.canvas = null;
    this.sounds = {
      click: new Howl({
        src: ['./sound/click.mp3']
      }),
      typing: new Howl({
        src: ['./sound/typing.mp3']
      }),
      deploy: new Howl({
        src: ['./sound/deploy.mp3']
      }),
    }
    this.imgstartpoint = {
      x: 0,
      y: 0,
    }
    this.beishusound = new Howl({
      src: ['./sound/deploy.mp3'],
      loop: true
    })
    this.mouseflag = false
    this.mousepoint = {
      x: 0,
      y: 0,
    }
    this.cengji = []
    this.state = {
      show: false,
      koulin: '无',
      changekoulin: false,
      selectpaper: false,
      zhucaidan: false,
      selectpaperdom: true,
      pagesize: 'a4',
      filename: '自定义',
      yuanfile: '未上传',
      changename: false,
      fangxiang: false,
      maxWidth: 800,
      showpage: false,
      changezhang: false,
      zhang: 5,
    };
    this.youbiaoleft = null
    this.youbiaoright = null
    this.changebeishu = null
    this.beishu = 100
  }
  componentDidMount() {
    // 启动页面动画渲染
    const animate = () => {
      this.draw()
      window.requestAnimationFrame(animate)
    };
    window.requestAnimationFrame(animate);

    this.setState({
      show: true,
      selectpaper: true,
      maxWidth: 800,
      showpage: false,
    })
  }
  draw() {
    if (this.refs.myCanvas) {
      // 显示示意图的绘制
      let fangdabeishu = { value: this.beishu / 100 }
      let canvas = this.refs.myCanvas
      let ctx = canvas.getContext("2d")
      let img = this.refs.yuanimg
      let imgWidth = img.width
      let imgHeight = img.height
      let imgstartpoint = this.imgstartpoint
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      if (fangdabeishu.value > 0) {
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight, imgstartpoint.x, imgstartpoint.y, (imgWidth * fangdabeishu.value), (imgHeight * fangdabeishu.value));
      } else if ((fangdabeishu.value < 0)) {
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight, imgstartpoint.x, imgstartpoint.y, (imgWidth / (0 - fangdabeishu.value)), (imgHeight / (0 - fangdabeishu.value)));
      } else {
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight, imgstartpoint.x, imgstartpoint.y, imgWidth, imgHeight);
      }
      // 实际尺寸图片的绘制
      fangdabeishu = { value: this.beishu * 2 / 100 }
      canvas = this.refs.shijiCanvas
      ctx = canvas.getContext("2d")
      img = this.refs.yuanimg
      imgWidth = img.width
      imgHeight = img.height
      imgstartpoint = {
        x: this.imgstartpoint.x * 2,
        y: this.imgstartpoint.y * 2,
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      if (fangdabeishu.value > 0) {
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight, imgstartpoint.x, imgstartpoint.y, (imgWidth * fangdabeishu.value), (imgHeight * fangdabeishu.value));
      } else if ((fangdabeishu.value < 0)) {
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight, imgstartpoint.x, imgstartpoint.y, (imgWidth / (0 - fangdabeishu.value)), (imgHeight / (0 - fangdabeishu.value)));
      } else {
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight, imgstartpoint.x, imgstartpoint.y, imgWidth, imgHeight);
      }
    }
  }
  selectPaper(lever) {
    // 设置一个定时器，关闭内容动画过后，再展示后续的操作页面
    this.setState({
      selectpaper: !this.state.selectpaper,
      pagesize: lever
    })
    setTimeout(() => {
      // 重新调整屏幕宽度
      this.setState({
        maxWidth: '100%',
        showpage: true,
        zhucaidan: true,
        selectpaperdom: false,
      })
    }, 500);
    setTimeout(() => {
      // 初始化刻度样式
      anime({
        targets: this.refs.youbiaoright.children,
        translateY: anime.stagger(-10),
        delay: 0
      })
      anime({
        targets: this.refs.youbiaoleft.children,
        translateY: anime.stagger(-10),
        delay: 0
      })
      // 初始化中间图案样式
      anime({
        targets: this.refs.zhongjiankuang,
        rotate: 85,
        delay: 0
      })
      anime({
        targets: this.refs.zhongjiankuang1,
        rotate: -85,
        delay: 0
      })
      // 设置上传图片的事件
      this.refs.getfile.addEventListener("change", readfile, false);
      const that = this
      function readfile() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          that.refs.yuanimg.src = reader.result
          that.refs.yuanimg.onload = function (e) {
            that.setState({
              yuanfile: '已上传',
            })
          }
        }
      }
      this.mousetuodong()
    }, 700)
  }
  // 设置鼠标拖动事件
  mousetuodong = () => {
    const canvas = this.refs.myCanvas
    // 画布的拖动事件
    const that = this
    canvas.onmousedown = function (e) {
      that.mouseflag = true;
      that.mousepoint = {
        x: e.clientX,
        y: e.clientY
      }
    }
    canvas.onmousemove = function (e) {
      if (that.mouseflag) {
        that.imgstartpoint = {
          x: that.imgstartpoint.x + e.clientX - that.mousepoint.x,
          y: that.imgstartpoint.y + e.clientY - that.mousepoint.y
        }
        that.mousepoint = {
          x: e.clientX,
          y: e.clientY
        }
      }
    }
    canvas.onmouseup = function (e) {
      that.mouseflag = false;
    }
  }
  // 点击方向盘
  fxpdown = e => {
    // 播放点击方向盘的声音
    // 播放连续声音
    this.beishusound.play()
    // 播放一次点击声音
    this.sounds.click.play()
    // 关闭并移除之前方向盘动画
    if (this.changebeishu) {
      this.changebeishu.pause()
      this.changebeishu.remove()
    }
    if (this.youbiaoright) {
      this.youbiaoright.pause()
      this.youbiaoright.remove()
    }
    if (this.youbiaoleft) {
      this.youbiaoleft.pause()
      this.youbiaoleft.remove()
    }
    this.changebeishu = null
    this.youbiaoright = null
    this.youbiaoleft = null
    // 计算是点了方向盘左边还是右边
    const width = this.refs.fangxiangpan.width
    const x = e.clientX - (this.offset(this.refs.fangxiangpan).left || 0)
    if ((width - x) > (width / 2)) {
      // 点击了方向盘左边
      // 计数器开始减少动画不自动播放赋值给this.changebeishu
      this.changebeishu = anime({
        targets: this.refs.beishu,
        innerHTML: [this.beishu, -1000],
        autoplay: false,
        easing: 'linear',
        round: 10,
        duration: 100000,
      })
      this.youbiaoleft = anime({
        targets: this.refs.youbiaoleft.children,
        translateY: anime.stagger(-20),
        easing: 'linear',
        autoplay: false,
        delay: 30,
        backgroundColor: '#FFFFCD'
      })
      this.youbiaoright = anime({
        targets: this.refs.youbiaoright.children,
        translateY: anime.stagger(-4),
        easing: 'linear',
        autoplay: false,
        delay: 30,
        backgroundColor: '#26dafd'
      })
      anime({
        targets: this.refs.fangxiangpan,
        rotate: {
          value: 30,
          duration: 500,
          easing: 'easeInOutSine'
        },
      })
      anime({
        targets: this.refs.fangxiangpan2,
        // translateX: 297,
        rotate: {
          value: -10,
          duration: 500,
          easing: 'easeInOutSine'
        },
      })
    } else {
      // 点击了方向盘右边
      // 计数器开始增加动画不自动播放赋值给this.changebeishu
      this.changebeishu = anime({
        targets: this.refs.beishu,
        innerHTML: [this.beishu, 1000],
        autoplay: false,
        easing: 'linear',
        round: 10,
        duration: 100000,
      })

      this.youbiaoright = anime({
        targets: this.refs.youbiaoright.children,
        translateY: anime.stagger(-20),
        easing: 'linear',
        autoplay: false,
        delay: 30,
        backgroundColor: '#FFFFCD'
      })
      this.youbiaoleft = anime({
        targets: this.refs.youbiaoleft.children,
        translateY: anime.stagger(-4),
        easing: 'linear',
        autoplay: false,
        delay: 30,
        backgroundColor: '#26dafd'
      })
      anime({
        targets: this.refs.fangxiangpan,
        // translateX: 297,
        rotate: {
          value: -30,
          duration: 500,
          easing: 'easeInOutSine'
        },
      })
      anime({
        targets: this.refs.fangxiangpan2,
        rotate: {
          value: 10,
          duration: 500,
          easing: 'easeInOutSine'
        },
      })
    }
    // 播放计数器动画
    this.changebeishu.play()
    this.youbiaoleft.play()
    this.youbiaoright.play()
  }
  fxpup = e => {
    // 播放方向盘结束声音，
    this.sounds.deploy.play()
    this.sounds.typing.play()
    // 关闭循环声音
    this.beishusound.pause()
    // 关闭并清除计数器加减动画
    this.changebeishu.pause()
    this.changebeishu.remove()
    // 计数器停止的数字赋值给倍数
    this.beishu = this.refs.beishu.innerHTML
    this.refs.tablebeishu.text = this.refs.beishu.innerHTML + '%'
    // 方向盘会到初始位置动画，默认播放
    anime({
      targets: this.refs.youbiaoright.children,
      translateY: anime.stagger(-10),
      backgroundColor: 'rgba(161, 236, 251,0.7)',
      delay: 0
    })
    anime({
      targets: this.refs.youbiaoleft.children,
      translateY: anime.stagger(-10),
      backgroundColor: 'rgba(161, 236, 251,0.7)',
      delay: 0
    })
    anime({
      targets: this.refs.fangxiangpan,
      rotate: {
        value: 0,
        duration: 500,
        easing: 'easeInOutSine'
      },
    })
    anime({
      targets: this.refs.fangxiangpan2,
      rotate: {
        value: 0,
        duration: 500,
        easing: 'easeInOutSine'
      },
    })
    // this.draw()
  }
  offset(curEle) {
    var totalLeft = null, totalTop = null, par = curEle.offsetParent;
    //首先加自己本身的左偏移和上偏移
    totalLeft += curEle.offsetLeft;
    totalTop += curEle.offsetTop
    //只要没有找到body，我们就把父级参照物的边框和偏移也进行累加
    while (par) {
      if (navigator.userAgent.indexOf("MSIE 8.0") === -1) {
        //累加父级参照物的边框
        totalLeft += par.clientLeft;
        totalTop += par.clientTop
      }

      //累加父级参照物本身的偏移
      totalLeft += par.offsetLeft;
      totalTop += par.offsetTop
      par = par.offsetParent;
    }
    return {
      left: totalLeft,
      top: totalTop
    }
  }
  // 上传按钮触发
  uploadFile = () => {
    this.refs.getfile.click()
  }
  xiaoguo = () => {
    this.sounds.deploy.play()
    this.sounds.typing.play()
    const img = this.refs.yuanimg
    const canvas = this.refs.myCanvas
    const ctx = canvas.getContext("2d")
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const cengji = []
    for (let i = 1; i < this.state.zhang; i++) {
      cengji.push(i * (255 / this.state.zhang))
    }
    for (var i = 0; i < imgData.data.length; i += 4) {
      var a = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
      for (let j = 0; j <= cengji.length; j++) {
        if (j == 0) {
          if (a <= cengji[1]) {
            a = 0
          }
        } else if (j == (cengji.length - 1)) {
          if (cengji[j] < a) {
            a = cengji[j]
          }
        } else {
          if (cengji[j] < a & a <= cengji[j + 1]) {
            a = cengji[j]
          }
        }
      }
      imgData.data[i] = a;
      imgData.data[i + 1] = a;
      imgData.data[i + 2] = a;
      imgData.data[i + 3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
    img.src = canvas.toDataURL("image/png");
    this.beishu = 100
    this.cengji = cengji
    this.imgstartpoint = {
      x: 0,
      y: 0
    }
  }
  changefangxiang = () => {
    this.sounds.click.play()
    this.sounds.deploy.play()
    if (!this.state.fangxiang) {
      anime({
        targets: this.refs.zhongjiankuang,
        rotate: 5,
        delay: 0
      })
      anime({
        targets: this.refs.zhongjiankuang1,
        rotate: -5,
        delay: 0
      })
    } else {
      anime({
        targets: this.refs.zhongjiankuang,
        rotate: 85,
        delay: 0
      })
      anime({
        targets: this.refs.zhongjiankuang1,
        rotate: -85,
        delay: 0
      })
    }
    this.setState({
      fangxiang: !this.state.fangxiang
    })
  }
  gohome = (url) => {
    if (this.props.location.pathname == url) {
      return
    }
    this.sounds.click.play()
    this.sounds.deploy.play()
    this.setState({
      show: !this.state.show
    });
    setTimeout(() => {
      this.props.history.push(url);
    }, 500);
  }
  tuzhi = () => {
    this.sounds.click.play()
    this.sounds.deploy.play()
    const response = HttpClient.query('users/token?token=' + this.state.koulin, 'get')
    response().then(res => {
      if (res.code) {
        // zip
        const zip = new JSZip();
        zip.file("Hello.txt", "Hello Worldn");
        const img = zip.folder("images");
        const canvas = this.refs.shijiCanvas
        const ctx = canvas.getContext("2d")
        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const cengji = this.cengji
        const list = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const copycengji = [];
        copycengji.push(0)
        for (let i = 0; i < cengji.length; i++) {
          copycengji.push(cengji[i])
        }
        const threelist = []
        var morecanvas = null
        for (let k = 0; k < copycengji.length; k++) {
          morecanvas = window.document.createElement('canvas');
          morecanvas.id = 'canvas_' + k;
          morecanvas.width = canvas.width;
          morecanvas.height = canvas.height;
          morecanvas.style = "border:1px solid #d3d3d3;zIndex: 20; position: absolute;"
          this.refs.myCanvas.append(morecanvas);
          for (var i = 0; i < imgData.data.length; i += 4) {
            if (copycengji[k] === 0) {
              if (imgData.data[i] == copycengji[k]) {
                list.data[i] = 255;
                list.data[i + 1] = 255;
                list.data[i + 2] = 255;
              } else {
                list.data[i] = 0;
                list.data[i + 1] = 0;
                list.data[i + 2] = 0;
              }
            } else {
              if (imgData.data[i] <= copycengji[k]) {
                list.data[i] = 255;
                list.data[i + 1] = 255;
                list.data[i + 2] = 255;
              } else {
                list.data[i] = 0;
                list.data[i + 1] = 0;
                list.data[i + 2] = 0;
              }
            }
          }
          morecanvas.getContext("2d").putImageData(list, 0, 0);
          var start = (new Date()).getTime();
          // 阻塞2s
          while ((new Date()).getTime() - start < 500) {
            continue;
          }
          this.sounds.deploy.play()
          img.file(k+'.png', morecanvas.toDataURL("image/png").replace("data:image/png;base64,", ""), {base64: true});
        }
        const that = this;
        zip.generateAsync({type:"blob"}).then(function(content) {
          // content就是blob数据，这里以example.zip名称下载    
          // 使用了FileSaver.js  
          FileSaver.saveAs(content, that.state.filename+'.zip')
      });
      } else {
        alert('请输入一个有效的口令！')
      }
    })
  }
  render() {
    const rightdivheight = ((document.documentElement.clientHeight - 220) / 2) - 10
    const youbiaoleftstyle = {
      position: 'absolute',
      zIndex: 8,
      marginLeft: '18%',
      marginTop: '45%',
      width: 40,
      height: 3,
      backgroundColor: 'rgba(161, 236, 251,0.7)'
    }
    const youbiaorightstyle = {
      position: 'absolute',
      zIndex: 8,
      marginLeft: '65%',
      marginTop: '45%',
      width: 40,
      height: 3,
      backgroundColor: 'rgba(161, 236, 251,0.7)'
    }
    return (
      <Arwes
        timeout={1500}
        animate
        show={this.state.show}
        background="./img/background-large.jpg"
        pattern="./img/glow.png"
        style={{ height: '100%' }}
      >
        <canvas
          id="3dCanvas"
          width={this.state.width}
          height={this.state.height}
          style={{
            width: this.state.width,
            height: this.state.height,
            zIndex: -1,
            position: "absolute"
          }}
        ></canvas>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          <Header animate show={this.state.show}>
            <div style={{
              margin: '0 auto',
              maxWidth: 800,
              padding: '20px 0',
              textAlign: 'left',
              position: 'relative'
            }}>
              <a style={{
                textAlign: 'left',
                width: '50%',
                float: 'left',
                padding: '0 10px',
                display: 'inline-block'
              }}>
                <Image
                  show={this.state.show}
                  onClick={() => this.gohome('/')}
                  layer={"header"}
                  animate
                  resources='./img/mine.jpeg'
                  style={{ width: 45, height: 45, margin: 0, display: 'inline-block' }}></Image>
                <Words
                  onClick={() => this.gohome('/')}
                  animate
                  show={this.state.show}
                  style={{
                    display: 'inline-block',
                    fontSize: 28,
                    color: '#a1ecfb',
                    fontFamily: 'Electrolize, sans-serif',
                    textShadow: '0 0 4px',
                    fontWeight: 'bold',
                    textTransform: 'uppercase',
                    margin: '0 0 0 10px',
                    paddingTop: 4,
                    lineHeight: 1,
                    verticalAlign: 'middle'
                  }}>
                  GUO WÉNJUN
                </Words>
              </a>
              <div style={{ textAlign: 'right', width: '50%', float: 'right', padding: '0 10px', marginLeft: 'auto' }}>
                <Link onClick={() => this.gohome('/blog')} style={{ fontFamily: "Electrolize,sans-serif", lineHeight: '45px' }}><i className="mdi mdi-note-outline" /> Blog</Link>
                <Link onClick={() => this.gohome('/paper')} style={{ marginLeft: 20, lineHeight: '45px' }}><i className="mdi mdi-box-cutter" /> Paper</Link>
                <Link onClick={() => this.gohome('/tools')} style={{ marginLeft: 20, lineHeight: '45px' }}><i className="mdi mdi-calculator" /> Tools</Link>
              </div>
              <div style={{ clear: 'both' }}></div>
            </div>
          </Header>
          <div
            style={{
              flex: '1',
              padding: '20px 0',
              overflowY: 'auto',
            }}
          >
            <div
              style={{
                margin: '0 auto',
                maxWidth: this.state.maxWidth,
                marginBottom: 0,
              }}
            >
              <input
                id="getfile"
                ref="getfile"
                type="file"
                accept=".jpeg,.jpg,.png,"
                style={{ display: "none" }}
              />
              <img
                id="yuanimg"
                ref="yuanimg"
                style={{ display: "none" }}
              />
              {this.state.fangxiang ? (
                <canvas id="shijiCanvas" ref="shijiCanvas" height={(document.documentElement.clientHeight - 280) * 2} width={((document.documentElement.clientHeight - 280) / 210 * 297) * 2} style={{ display: "none", border: '4px solid #26dafd', height: (document.documentElement.clientHeight - 280) * 2, width: ((document.documentElement.clientHeight - 280) / 210 * 297) * 2 }}>
                  您的浏览器不支持 HTML5 canvas 标签。
                </canvas>
              ) : (
                <canvas id="shijiCanvas" ref="shijiCanvas" height={(document.documentElement.clientHeight - 280) * 2} width={((document.documentElement.clientHeight - 280) / 297 * 210) * 2} style={{ display: "none", border: '1px solid #26dafd', height: (document.documentElement.clientHeight - 280) * 2, width: ((document.documentElement.clientHeight - 280) / 297 * 210) * 2 }}>
                  您的浏览器不支持 HTML5 canvas 标签。
                </canvas>
              )}
              {this.state.selectpaperdom && (
                <Frame
                  show={this.state.selectpaper}
                  animate={true}
                  level={0}
                  corners={4}
                  layer='primary'
                  style={{ minHeight: 100, textAlign: "center", marginTop: '20%' }}
                >
                  {
                    anim => (
                      <Content style={{ margin: 20 }}>
                        <h1 href='https://gitee.com/mimidegongkai' target="_blank">
                          <Words show={anim.entered} animate style={{ marginLeft: 5 }}>嵌影纸雕</Words>
                        </h1>
                        <p>
                          <Words style={{ fontFamily: '站酷文艺体' }} animate show={anim.entered}>欢迎来到纸艺术的图纸加工厂,请选择你需要的图纸类型 . . . </Words>
                        </p>
                        <div style={{ lineHeight: 3 }}>
                          <Link
                            animate
                            layer={"control"}
                            style={{ marginTop: 0 }}
                            onClick={() => this.selectPaper('a3')}
                          >{anim.entered && 'A3型号图纸'}</Link>
                          <Link
                            layer={"control"}
                            style={{ marginLeft: 10, marginTop: 0 }}
                            animate
                            onClick={() => this.selectPaper('a4')}
                          >{anim.entered && 'A4型号图纸'}</Link>
                          <Link
                            layer={"control"}
                            style={{ marginLeft: 10, marginTop: 0 }}
                            animate
                            onClick={() => this.selectPaper('a5')}
                          >{anim.entered && 'A5型号图纸'}</Link>
                        </div>
                      </Content>
                    )
                  }
                </Frame>
              )}
              {this.state.zhucaidan && (
                <Row>
                  <Col s={8} m={8} l={8} xl={8}>
                    <Frame
                      show={this.state.zhucaidan}
                      animate={true}
                      level={0}
                      corners={4}
                      layer='primary'
                    >
                      {
                        this.state.showpage && (
                          <div style={{ padding: 30, minHeight: document.documentElement.clientHeight - 220, textAlign: 'center' }}>
                            {this.state.fangxiang ? (
                              <canvas id="myCanvas" ref="myCanvas" height={document.documentElement.clientHeight - 280} width={(document.documentElement.clientHeight - 280) / 210 * 297} style={{ border: '2px solid #26dafd', height: (document.documentElement.clientHeight - 280), width: (document.documentElement.clientHeight - 280) / 210 * 297 }}>
                                您的浏览器不支持 HTML5 canvas 标签。
                              </canvas>
                            ) : (
                              <canvas id="myCanvas" ref="myCanvas" height={document.documentElement.clientHeight - 280} width={(document.documentElement.clientHeight - 280) / 297 * 210} style={{ border: '2px solid #26dafd', height: (document.documentElement.clientHeight - 280), width: (document.documentElement.clientHeight - 280) / 297 * 210 }}>
                                您的浏览器不支持 HTML5 canvas 标签。
                              </canvas>
                            )}
                          </div>
                        )
                      }
                    </Frame>
                  </Col>
                  <Col s={4} m={4} l={4} xl={4}>
                    <Frame
                      style={{ minHeight: rightdivheight, padding: '10px 20px', fontSize: 12 }}
                    >
                      <Table
                        animate
                        headers={['属性', '值', '描述', '操作']}
                        dataset={[
                          ['图纸名称', this.state.changename ? (<input style={{ backgroundColor: 'rgba(100,100,100,0)', borderColor: 'rgba(172,249,251,0.65)', color: 'rgba(172,249,251,0.65)' }} value={this.state.filename} onChange={e => { this.setState({ filename: e.target.value }) }} />) : (<Link>{this.state.filename}</Link>), '最后生成后图纸文件的名字', <Link onClick={() => { this.setState({ changename: !this.state.changename }) }}>修改</Link>],
                          ['原图片', <Link>{this.state.yuanfile}</Link>, '上传的图片', <Link onClick={() => this.uploadFile()}>上传</Link>],
                          ['缩放', <Link><a ref='tablebeishu'>100%</a></Link>, '与原图片的缩放比例', ''],
                          ['纸张数', this.state.changezhang ? (<input style={{ backgroundColor: 'rgba(100,100,100,0)', borderColor: 'rgba(172,249,251,0.65)', color: 'rgba(172,249,251,0.65)' }} value={this.state.zhang} onChange={e => { this.setState({ zhang: e.target.value }) }} />) : (<Link>{this.state.zhang}</Link>), '分解后图纸的数量', <Link onClick={() => { this.setState({ changezhang: !this.state.changezhang }) }}>修改</Link>],
                          ['图纸类型', <Link>{this.state.pagesize}</Link>, '生成图纸的类型', ''],
                          ['口令', this.state.changekoulin ? (<input style={{ backgroundColor: 'rgba(100,100,100,0)', borderColor: 'rgba(172,249,251,0.65)', color: 'rgba(172,249,251,0.65)' }} value={this.state.koulin} onChange={e => { this.setState({ koulin: e.target.value }) }} />) : (<Link>{this.state.koulin}</Link>), '一个口令可以生成一次图纸', <Link onClick={() => { this.setState({ changekoulin: !this.state.changekoulin }) }}>修改</Link>],
                        ]}
                      />
                      <div style={{ float: 'left', marginLeft: 20 }}>
                        <Button show={true} onClick={this.xiaoguo}>效果图</Button>
                      </div>
                      <div style={{ float: 'right', marginRight: 20 }}>
                        <Button show={true} onClick={() => { this.tuzhi() }}>{this.state.showpage ? '生成图纸' : '继续编辑'}</Button>
                      </div>
                    </Frame>
                    <Frame
                      style={{ minHeight: rightdivheight, marginTop: 20 }}
                    >
                      <div style={{ height: rightdivheight, padding: '5% 5%' }}>
                        <div ref='zhongjianfont'
                          onClick={this.changefangxiang}
                          style={{
                            fontSize: 70,
                            margin: "auto",
                            textAlign: "center",
                            position: 'absolute',
                            margin: '15% 28%',
                            color: 'orange',
                            zIndex: 13,
                            width: '33%',
                            height: '40%'
                          }}>
                        </div>
                        <h2 style={{
                          margin: "auto",
                          textAlign: "center",
                          position: 'absolute',
                          margin: '10% 15%',
                          color: 'rgba(161, 236, 251,0.4)',
                          zIndex: 8
                        }}>
                          Percentage
                        </h2>
                        <h4 style={{
                          margin: "auto",
                          textAlign: "center",
                          position: 'absolute',
                          margin: '50% 15%',
                          color: 'rgba(161, 236, 251,1)',
                          zIndex: 8
                        }}>
                          narrow
                        </h4>
                        <h5 style={{
                          margin: "auto",
                          textAlign: "center",
                          position: 'absolute',
                          margin: '51% 55%',
                          color: 'rgba(161, 236, 251,1)',
                          zIndex: 8
                        }}>
                          amplification
                        </h5>
                        <h6 style={{
                          margin: "auto",
                          textAlign: "center",
                          position: 'absolute',
                          margin: '4% 40%',
                          color: 'rgba(161, 236, 251,0.7)',
                          zIndex: 8
                        }}>
                          controller
                        </h6>
                        <h1 ref='zhongjianfont' style={{
                          fontSize: 70,
                          margin: "auto",
                          textAlign: "center",
                          position: 'absolute',
                          margin: '18% 41%',
                          color: 'orange',
                          zIndex: 8
                        }}>
                          {this.state.fangxiang ? 'H' : 'S'}
                        </h1>
                        <div ref="zhongjiankuang" style={{
                          position: 'absolute',
                          zIndex: 7,
                          marginLeft: '31%',
                          marginTop: '26%',
                          width: '28%',
                          height: '10%',
                          border: '1px solid rgba(161, 255, 255,1)'
                        }} />
                        <div ref="zhongjiankuang1" style={{
                          position: 'absolute',
                          zIndex: 7,
                          marginLeft: '31%',
                          marginTop: '26%',
                          width: '28%',
                          height: '10%',
                          border: '1px solid rgba(161, 255, 255,1)'
                        }} />
                        <div ref="youbiaoleft">
                          <div style={youbiaoleftstyle} />
                          <div style={youbiaoleftstyle} />
                          <div style={youbiaoleftstyle} />
                          <div style={youbiaoleftstyle} />
                          <div style={youbiaoleftstyle} />
                          <div style={youbiaoleftstyle} />
                          <div style={youbiaoleftstyle} />
                          <div style={youbiaoleftstyle} />
                        </div>
                        <div ref="youbiaoright">
                          <div style={youbiaorightstyle} />
                          <div style={youbiaorightstyle} />
                          <div style={youbiaorightstyle} />
                          <div style={youbiaorightstyle} />
                          <div style={youbiaorightstyle} />
                          <div style={youbiaorightstyle} />
                          <div style={youbiaorightstyle} />
                          <div style={youbiaorightstyle} />
                        </div>
                        <h2 style={{
                          margin: "auto",
                          textAlign: "center",
                          position: 'absolute',
                          margin: '0% 54%',
                          zIndex: 11
                        }}>
                          <span style={{ fontFamily: "Electrolize,sans-serif" }} ref='beishu'>100</span>%
                        </h2>
                        <img onMouseDown={e => { this.fxpdown(e) }} onMouseUp={e => { this.fxpup(e) }} ref="fangxiangpan" src="./img/fangxiangpan.png" style={{ margin: "auto", textAlign: "center", position: 'absolute', zIndex: 10, width: '90%', height: '80%' }} />
                        <img ref="fangxiangpan2" src="./img/fangxiangpan2.png" style={{ margin: "auto", textAlign: "center", position: 'absolute', zIndex: 9, width: '90%', height: '80%' }} />
                      </div>
                    </Frame>
                  </Col>
                </Row>
              )}
            </div>
          </div>
          <Footer animate show={this.state.show} style={{ textAlign: 'left' }}>
            <div style={{
              margin: '0 auto',
              maxWidth: 800,
              padding: '20px 0',
              textAlign: 'left',
              position: 'relative'
            }}>
              <Link show={this.state.show} href='https://gitee.com/mimidegongkai' target="_blank">
                <i className="mdi mdi-code-brackets" />
                <Words show={this.state.show} animate style={{ marginLeft: 5 }}>Codebase</Words>
              </Link>

              <Link style={{ float: 'right' }} href='http://beian.miit.gov.cn/' target="_blank">
                <Words show={this.state.show} animate style={{ marginLeft: 5 }}>京ICP备2021006930号</Words>
              </Link>
              <div style={{ clear: 'both' }}></div>
            </div>
          </Footer>
        </div>
      </Arwes >
    );
  }
}
